<template>
	<view class="page">
		<view class="searchPP">
			<image @click="goBackM" style="width: 0.6rem;height: 1rem;padding: 0rem 0.5rem 0rem 0rem;" src="../../../style/image/cargo/leftarow.jpg"
			 alt="">
				<view class="searchP">
					<view class="search" :style="{ width: '100%' }">
						<u-search placeholder="请输入您要搜索的商户名称或电话" shape="round" v-model="keyword" :show-action="false" @search="searchShop"></u-search>
					</view>
				</view>
		</view>
		<u-empty style="margin-top: 3rem;" v-if="showDatasList.length==0 && !isLoading" text="暂无数据" mode="data"></u-empty>
		<view class="showDatsC" v-for="(item,index) in showDatasList">
			<view class="" style="border-bottom: 1px solid #e8e8e8;" @click="goCargoM(item)">
				<view class="prolifyP">
					<view style="">
						<view style=" color:rgb(0, 0, 0);font-size: 0.72rem;font-family: PingFang SC;font-weight: 300;color: #666666;margin-bottom: 0.1rem;">
							{{item.shopName}}
						</view>
						<view style="margin-left: 0px;font-weight: 300;font-family: PingFang SC;">
							{{item.phone}}
						</view>
					</view>
					<image style="width: 0.5rem;height: 0.5rem;" src="../../../style/image/cargo/back.png" alt="">
				</view>
			</view>
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import {
		findShopList
	} from "../../../utils/uniApi";

	import {
		AppModule
	} from '../../../store/modules/app'

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		public isLoading = false; //是否加载中

		public keyword = ''

		public virtualDic: any //虚拟码的数据

		public showDatasList: Array < object >= []

		created() {

		}
		onLoad(option: any) {
			if (option.virtual) {
				this.virtualDic = JSON.parse(option.virtual)
			}
		}
		onHide() {
			uni.hideLoading();
		}

		mounted() {
			this.findShopData(this.keyword)
		}
		//接口查询商户信息
		findShopData(key: any) {
			this.isLoading = true
			uni.showLoading({
				title: '加载中'
			});
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				shopName: key, //	商户名称搜索  可以选
				state: '', //yph 已铺货|wph 未铺货|dx 掉线|zx 在线
				orderBy: '' //	syDesc 收益倒序|syAsc 收益正序|timeDesc 创建时间倒序|timeAsc 创建时间正序
			}
			findShopList(params).then((res: any) => {
				this.isLoading = false
				uni.hideLoading();
				if (res.data.code == 200) {
					if (this.showDatasList.length > 0) { //搜索时清除已有数据  如果有分页 需在考虑
						this.showDatasList = [];
					}
					res.data.data.filter((item: any, index: any) => {
						this.showDatasList.push(item)
					})
				} else {
					uni.showToast({
						title: "请求失败",
						icon: "none",
						duration: 2000,
					});
				}
			})
		}

		//搜索框
		searchShop(value: any) {
			this.keyword = value
			this.findShopData(this.keyword)
		}

		goCargoM(data: any) {
			console.log('去商户网点', data)
			var dic = {
				virtual: this.virtualDic,
				shop: data
			}
			uni.navigateTo({
				url: './virtualWebsite?data=' + encodeURIComponent(JSON.stringify(dic)),
			});
		}

		goBackM() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		background-color: #F3F5F7;
	}

	.searchPP {
		background-color: white;
		padding: 0.5rem;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e8e8e8;
	}

	.searchP {
		background-color: white;
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.prolifyP {
		display: flex;
		padding: 0.8rem 1rem;
		justify-content: space-between;
		align-items: center;
	}

	/* 加上标签 或者加上>   */
	.agentprolify {
		display: flex;
		align-items: center;
		padding: 0.8rem 1rem;
	}

	.agentprolify :first-child {
		font-size: 0.72rem;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #666666;
	}

	.agentprolify> :nth-child(1) {}

	.agentprolify> :nth-child(2) {
		color: red;
	}

	.cargoBtn {
		background: #02AF74;
		border-radius: 0.2rem;
		padding: 0.2rem;
		color: white;
	}
</style>
